<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生中心 - 学籍管理系统</title>
    <!-- Bootstrap CSS -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome for icons (optional) -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> -->
    <link rel="stylesheet" href="css/all.min.css"> <!-- Assuming you download Font Awesome too -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 添加 Chart.js -->
    <script src="js/chart.min.js"></script>
    <style>
        /* 与 admin.html 类似的样式，可以提取到 style.css */
        body {
            display: flex;
        }
        .sidebar {
            min-width: 250px;
            max-width: 250px;
            background: #343a40; /* 可以与管理员页面统一，或用不同颜色区分 */
            color: #fff;
            min-height: 100vh;
            transition: all 0.3s;
        }
        .sidebar.toggled {
            margin-left: -250px;
        }
        .sidebar .nav-link {
            color: rgba(255,255,255,.8);
        }
        .sidebar .nav-link:hover {
            color: #fff;
            background: #495057;
        }
        .sidebar .nav-link.active {
            color: #fff;
            background: #17a2b8; /* 学生页面可以用info颜色 */
        }
        .sidebar-header {
            padding: 1.5rem;
            text-align: center;
            background: #17a2b8;
        }
        .sidebar-header h3 {
            margin-bottom: 0;
        }
        .content {
            width: 100%;
            padding: 20px;
            transition: all 0.3s;
        }
        #sidebarCollapseStudent {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 1000;
        }
        @media (max-width: 768px) {
            .sidebar {
                margin-left: -250px;
            }
            .sidebar.toggled {
                margin-left: 0;
            }
            #sidebarCollapseStudent {
                 display: block !important;
            }
        }
        .card-clickable {
            cursor: pointer;
            transition: box-shadow 0.2s;
        }
        .card-clickable:hover {
            box-shadow: 0 0 0 0.2rem #17a2b833;
        }
    </style>
</head>
<body>
    <!-- Toast Container -->
    <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px; z-index: 1050;">
        <div id="toastContainerStudent" style="position: absolute; top: 1rem; right: 1rem;">
            <!-- Toasts will be appended here -->
        </div>
    </div>

    <nav class="sidebar bg-dark" id="studentSidebar">
        <div class="sidebar-header" style="background-color: #17a2b8;">
            <h3>学生中心</h3>
        </div>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#" data-target="student-dashboard-content"><i class="fas fa-home mr-2"></i>个人主页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="view-exams-content"><i class="fas fa-file-alt mr-2"></i>查看考试信息</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="view-class-content"><i class="fas fa-school mr-2"></i>查看班级信息</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="view-grades-content"><i class="fas fa-award mr-2"></i>查看个人成绩</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-target="view-profile-content"><i class="fas fa-user mr-2"></i>查看个人信息</a>
            </li>
            <li class="nav-item mt-auto">
                <a class="nav-link" href="#" id="logoutButtonStudent"><i class="fas fa-sign-out-alt mr-2"></i>退出登录</a>
            </li>
        </ul>
    </nav>

    <div class="content p-4" id="mainStudentContent">
        <button class="btn btn-info d-md-none mb-3" type="button" id="sidebarCollapseStudent">
            <i class="fas fa-bars"></i>
            <span>切换导航</span>
        </button>

        <!-- 个人主页 (默认显示) -->
        <div id="student-dashboard-content" class="main-section">
            <h2>个人主页</h2>
            <p>欢迎你, <span id="studentName"></span>!</p>

            <div class="row mt-4">
                <div class="col-xl-4 col-md-6 mb-4">
                    <div class="card border-left-primary shadow h-100 py-2 card-clickable" id="cardExams">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                        已参加考试</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="totalExamsTakenStat">加载中...</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-file-alt fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-md-6 mb-4">
                    <div class="card border-left-success shadow h-100 py-2 card-clickable" id="cardGrades">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                        平均成绩</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="averageScoreStat">加载中...</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-chart-line fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 col-md-6 mb-4">
                    <div class="card border-left-info shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                        成绩分布</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800" id="gradeDistributionStat">
                                        <div class="small">
                                            <div class="d-flex justify-content-between align-items-center mb-1">
                                                <span class="text-success">优秀</span>
                                                <span id="excellentCount" class="text-success">0</span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mb-1">
                                                <span class="text-info">良好</span>
                                                <span id="goodCount" class="text-info">0</span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mb-1">
                                                <span class="text-warning">及格</span>
                                                <span id="passCount" class="text-warning">0</span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span class="text-danger">不及格</span>
                                                <span id="failCount" class="text-danger">0</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-chart-pie fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表容器 -->
            <div class="row mt-4">
                <div class="col-xl-6 mb-4">
                    <div class="card shadow">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">成绩趋势</h6>
                        </div>
                        <div class="card-body">
                            <div class="chart-container" style="position: relative; height:300px; width:100%">
                                <canvas id="gradeTrendChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 mb-4">
                    <div class="card shadow">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">科目成绩分布</h6>
                        </div>
                        <div class="card-body">
                            <div class="chart-container" style="position: relative; height:300px; width:100%">
                                <canvas id="subjectGradeChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 查看考试信息 -->
        <div id="view-exams-content" class="main-section" style="display: none;">
            <h2>查看考试信息</h2>
            <p>此处将展示考试列表。</p>
        </div>

        <!-- 查看班级信息 -->
        <div id="view-class-content" class="main-section" style="display: none;">
            <h2>查看班级信息</h2>
            <p>此处将展示你的班级信息。</p>
        </div>

        <!-- 查看个人成绩 -->
        <div id="view-grades-content" class="main-section" style="display: none;">
            <h2>查看个人成绩</h2>
            <p>此处将展示你的个人成绩单。</p>
        </div>

        <!-- 查看个人信息 -->
        <div id="view-profile-content" class="main-section" style="display: none;">
            <h2>查看个人信息</h2>
            <p>此处将展示你的详细个人信息。</p>
            <button class="btn btn-warning mt-3" id="changePasswordBtn">修改密码</button>
            <!-- 修改密码模态框 -->
            <div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-labelledby="changePasswordModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="changePasswordModalLabel">修改密码</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <form id="changePasswordForm">
                      <div class="form-group">
                        <label for="oldPassword">旧密码</label>
                        <input type="password" class="form-control" id="oldPassword" required>
                      </div>
                      <div class="form-group">
                        <label for="newPassword">新密码</label>
                        <input type="password" class="form-control" id="newPassword" required>
                      </div>
                      <div class="form-group">
                        <label for="confirmPassword">确认新密码</label>
                        <input type="password" class="form-control" id="confirmPassword" required>
                      </div>
                      <button type="submit" class="btn btn-primary">提交</button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS and dependencies -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> -->
    <script src="js/jquery.slim.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> -->
    <script src="js/popper.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script> -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Custom JS -->
    <script src="js/auth.js"></script>
    <script src="js/student.js"></script>
</body>
</html> 